<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="88px">
            <el-form-item label="园所名称：" prop="name">
                    <el-select v-model="queryParams.code" @change="selectSchool" clearable filterable placeholder="请选择">
                          <el-option
                            v-for="item in schoolList"
                            :key="item.code"
                            :label="item.title"
                            :value="item.code">
                          </el-option>
                    </el-select>
             </el-form-item>
             <el-form-item label="学期" prop="semId">
                <el-select  v-model="queryParams.semId" filterable clearable multiple collapse-tags placeholder="请选择学期" style="width: 300px;" >
                  <el-option
                    v-for="item in semsterList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                    size="small">
                  </el-option>
                </el-select>
              </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
               <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
             </el-form-item>
        </el-form>
        <div class="echart" >
           <div class="averageChart" ref="averageChart"></div>
           <div class="passRateChart" ref="passRateChart"></div>
          <div class="publicSchoolChart" ref="publicSchoolChart"></div>
          <div class="voluntarySchoolChart" ref="voluntarySchoolChart"></div>
        </div>
    </div>
</template>
<script>
  import {schoolList } from "@/api/qu/qyyerygk";
  import { selectSemster} from "@/api/base/semster";
  import moment from "moment";
 export default {
   name: "ystcsjdb",
   data() {
     return {
          // 查询参数
           queryParams: {
             code:'123',
             semId:[]
           },
           schoolList:[],
            // 学期数据
           semsterList: [],
           legendSelected:{
                '10m*往返跑':true,
                '跳远':false,
                '坐位体前屈':false,
                '平衡木':false,
                '双脚跳远':false,
           },
           //平均成绩
           averageChart:null,
           averageList:[
              {name:'2020~2021上学期',run:4.8,longJump:4.7,sitReach:4.6,beamn:4.5,jump:5},
              {name:'2020~2021下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2021~2022上学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2021~2022下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5,},
              {name:'2022~2023上学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2022~2023下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
           ],
           //合格率
           passRateChart:null,
           passRateList:[
              {name:'2020~2021上学期',run:4.8,longJump:4.7,sitReach:4.6,beamn:4.5,jump:5},
              {name:'2020~2021下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2021~2022上学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2021~2022下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5,},
              {name:'2022~2023上学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2022~2023下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              ],
            appraisalChart:null,
            appraisalList:[
              {name:'5分',run:20,longJump:30,sitReach:30,beamn:40,jump:10},
              {name:'4分',run:40,longJump:30,sitReach:10,beamn:40,jump:10},
              {name:'3分',run:20,longJump:30,sitReach:30,beamn:40,jump:10},
              {name:'2分',run:20,longJump:30,sitReach:30,beamn:40,jump:4},
              {name:'1分',run:40,longJump:30,sitReach:30,beamn:40,jump:10},
           ],
           //公办园平均成绩
           publicSchoolChart:null,
           publicSchoolList:[
              {name:'2020~2021上学期',run:4.8,longJump:4.7,sitReach:4.6,beamn:4.5,jump:5},
              {name:'2020~2021下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2021~2022上学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2021~2022下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5,},
              {name:'2022~2023上学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2022~2023下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
           ],
           //民办园
           voluntarySchoolChart:null,
           voluntarySchoolList:[
              {name:'2020~2021上学期',run:4.8,longJump:4.7,sitReach:4.6,beamn:4.5,jump:5},
              {name:'2020~2021下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2021~2022上学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2021~2022下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5,},
              {name:'2022~2023上学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
              {name:'2022~2023下学期',run:4.7,longJump:4.5,sitReach:4.6,beamn:4.7,jump:5},
           ]
        } 
   }, 
   created() {
       this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
       this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
       });
       selectSemster({'status':1}).then(response => {
         this.semsterList = response.rows;
         this.semsterList.map((item,index)=>{
            if(index<6){
                this.queryParams.semId.push(item.id)
            }
         })
       });
       this.getschoolList()
      
   },
   mounted(){
        // this.getList()
        this.passRateChart = this.$echarts.init(this.$refs.passRateChart);
        this.averageChart = this.$echarts.init(this.$refs.averageChart);
        this.publicSchoolChart = this.$echarts.init(this.$refs.publicSchoolChart);
        this.voluntarySchoolChart = this.$echarts.init(this.$refs.voluntarySchoolChart);
        this.averageChartFn();
        this.passRateChartFn()
        this.publicSchoolChartFn();
        this.voluntarySchoolChartFn()
   },
   methods: {
    selectSchool(){

    },
    handleQuery(){

    },
    resetQuery(){
    
    },
     //获取学校列表
     async getschoolList(){
        const data = await schoolList();
        this.schoolList=data.rows;
     },
     passRateChartFn(){
        const option = {
         // backgroud:'#333',
         title: {
           text: '园所各项合格率统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
        
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
              selectedMode: 'single',
              top:0,
              left:'right',
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               interval: 0,//使x轴文字显示全
              },
              data: this.passRateList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value',
              name: "单位: %",
              }
          ],
        //   color:['#2f89cf','#27d08a'],
          series: [
          {
                  name: '10m*往返跑',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.passRateList.map(item=>item.run)
              },
              {
                  name: '跳远',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  // stack: 'Ad',
                  barWidth:'60',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.passRateList.map(item=>item.longJump),
              },
              {
                  name: '坐位体前屈',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.passRateList.map(item=>item.sitReach),
              },
              {
                  name: '平衡木',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.passRateList.map(item=>item.beamn),
              },
              {
                  name: '双脚跳远',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.passRateList.map(item=>item.jump),
              },
             
          ]
          }
             // 使用刚指定的配置项和数据显示图表
          this.passRateChart.setOption(option,true);
          window.addEventListener("resize", this.monitorResize);
    },
    
    averageChartFn(){
        const option = {
         // backgroud:'#333',
         title: {
           text: '园所各项平均成绩统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
        
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
              selectedMode: 'single',
              top:0,
              left:'right',
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               interval: 0,//使x轴文字显示全
              },
              data: this.averageList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value',
              name: "单位: 分",
              }
          ],
        //   color:['#2f89cf','#27d08a'],
          series: [
          {
                  name: '10m*往返跑',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.averageList.map(item=>item.run)
              },
              {
                  name: '跳远',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  // stack: 'Ad',
                  barWidth:'60',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.averageList.map(item=>item.longJump),
              },
              {
                  name: '坐位体前屈',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.averageList.map(item=>item.sitReach),
              },
              {
                  name: '平衡木',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.averageList.map(item=>item.beamn),
              },
              {
                  name: '双脚跳远',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.averageList.map(item=>item.jump),
              },
             
          ]
          }
             // 使用刚指定的配置项和数据显示图表
          this.averageChart.setOption(option,true);
          window.addEventListener("resize", this.monitorResize);
    },
    publicSchoolChartFn(){
        const option = {
         // backgroud:'#333',
         title: {
           text: '公办园各项平均成绩统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
        
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
              selectedMode: 'single',
              top:0,
              left:'right',
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               interval: 0,//使x轴文字显示全
              },
              data: this.publicSchoolList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value',
              name: "单位: 分",
              }
          ],
        //   color:['#2f89cf','#27d08a'],
          series: [
          {
                  name: '10m*往返跑',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.publicSchoolList.map(item=>item.run)
              },
              {
                  name: '跳远',
                  type: 'line',
                   smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  stack: 'Ad',
                  barWidth:'60',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.publicSchoolList.map(item=>item.longJump),
              },
              {
                  name: '坐位体前屈',
                  type: 'line',
                smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.publicSchoolList.map(item=>item.sitReach),
              },
              {
                  name: '平衡木',
                  type: 'line',
                   smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.publicSchoolList.map(item=>item.beamn),
              },
              {
                  name: '双脚跳远',
                  type: 'line',
                   smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.publicSchoolList.map(item=>item.jump),
              },
             
          ]
          }
             // 使用刚指定的配置项和数据显示图表
          this.publicSchoolChart.setOption(option,true);
          window.addEventListener("resize", this.monitorResize);
    },
    voluntarySchoolChartFn(){
        const option = {
         // backgroud:'#333',
         title: {
           text: '民办园各项平均成绩统计',
          //  subtext: '纯属虚构',
           left: 'left'
         },
        
         tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              }
          },
          legend: {
              selectedMode: 'single',
              top:0,
              left:'right',
              selected:this.legendSelected
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
              type: 'category',
              axisLabel: {//x轴文字的配置
               show: true,
               interval: 0,//使x轴文字显示全
              },
              data: this.voluntarySchoolList.map(item=>item.name)
              }
          ],
          yAxis: [
              {
              type: 'value',
              name: "单位: 分",
              }
          ],
        //   color:['#2f89cf','#27d08a'],
          series: [
          {
                  name: '10m*往返跑',
                  type: 'line',
                //   smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  // stack: 'Ad',
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.voluntarySchoolList.map(item=>item.run)
              },
              {
                  name: '跳远',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  // stack: 'Ad',
                  barWidth:'60',
                  emphasis: {
                      focus: 'series'
                  },
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data: this.voluntarySchoolList.map(item=>item.longJump),
              },
              {
                  name: '坐位体前屈',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.voluntarySchoolList.map(item=>item.sitReach),
              },
              {
                  name: '平衡木',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.voluntarySchoolList.map(item=>item.beamn),
              },
              {
                  name: '双脚跳远',
                  type: 'line',
                  smooth:true,
                  symbol:'none',
                  shwoSymbol:false,
                  emphasis: {
                      focus: 'series'
                  },
                  barWidth:'60',
                  label: {
                    show: true,
                    position: 'inside',
                    fontSize: 15
                  },
                  data:this.voluntarySchoolList.map(item=>item.jump),
              },
             
          ]
          }
             // 使用刚指定的配置项和数据显示图表
          this.voluntarySchoolChart.setOption(option,true);
          window.addEventListener("resize", this.monitorResize);
    },
       //地图监听窗口缩放事件
     monitorResize(){
      this.averageChart.resize();
      this.passRateChart.resize();
      this.publicSchoolChart.resize();
      this.voluntarySchoolChart.resize();
    },
   }
 };
</script>
<style lang="scss" scoped>
 .echart{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    height:500px;
    .averageChart{
        width: 45%;
        height:70%;
    }
    .passRateChart{
        width:45%;
        height: 70%;
    }
    .publicSchoolChart{
        margin-top: 50px;
        width: 45%;
        height:70%;
    }
    .voluntarySchoolChart{
        margin-top: 50px;
        width: 45%;
        height:70%;
    }
 }
</style>